<template>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:currentPage="paging.page"
      v-model:page-size="paging.limit"
      :page-sizes="[10, 20, 30, 40]"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 回到顶部 -->
    <el-backtop :bottom="100" target=".el-main" ref="backtop" :visibility-height="5"></el-backtop>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 默认页
      background: true, // 背景
      _page: this.page, // 分页
      _limit: this.limit // 每页显示条数
    }
  },

  computed: {
    paging() {
      return { page: this._page, limit: this._limit }
    }
  },
  // 组件传值
  props: {
    page: Number, // 分页
    limit: Number, // 每页显示条数
    total: { typer: Number, default: 999 } // 总数
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      // if (!(math.ceil(this.total / this._limit) >= this._page)) {
      //   return
      // }
      // 条数
      this._limit = val
      //   父传子
      this.$emit('limits', val)
      this.$nextTick(() => {
        const $el = this.$refs.backtop.$el
        if ($el.click) {
          $el.click()
        }
      })
    },
    handleCurrentChange(val) {
      // 页数
      this._page = val
      //   父传子
      this.$emit('pages', val)
      this.$nextTick(() => {
        const $el = this.$refs.backtop.$el
        if ($el.click) {
          $el.click()
        }
      })
    }
  },

}
</script>

<style lang="less" scoped>
// 分页
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
